<template>
    <div class="common-layout">
        <el-container>
            <el-aside>
                <!-- logo 标题 -->
                <div class="logo_box">
                    <el-icon size="40">
                        <Shop />
                    </el-icon>
                    <span v-show="isShow">商城后台管理系统</span>
                </div>
                <!-- 侧边导航 -->
                <my_menu :isshow="isShow" />
            </el-aside>
            <el-container>
                <el-header>
                    <el-icon size="45" @click="isShow = !isShow">
                        <component :is="iconName"></component>
                    </el-icon>

                    <p v-if="$store.state.userInfo.adminname">
                        欢迎: {{ $store.state.userInfo.adminname }}
                        <el-button @click="outLogin">退出登录</el-button>
                    </p>
                    <el-button v-else @click="goLogin">登录</el-button>
                </el-header>
                <el-main>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Shop, Fold, Expand, Location, House } from "@element-plus/icons-vue";
import my_menu from "../components/menu.vue"

export default {
    data() {
        return {
            isShow: true,
            proList: [],
            current: 1,
            listLength: 0
        };
    },
    methods: {
        // 1. 退出登录
        outLogin() {
            this.$store.commit("setUserInfo", {});
        },
        // 2. 登录
        goLogin() {
            this.$router.push("/login");
        },
    },
    computed: {
        asideWidth() {
            return this.isShow ? "200px" : "50px";
        },
        iconName() {
            return this.isShow ? "Fold" : "Expand";
        },
    },
    components: {
        Shop,
        Fold,
        Expand,
        Location,
        House,
        my_menu,
    },
};
</script>

<style lang="scss" scoped>
.common-layout {
    height: 100%;

    .el-container {
        height: 100%;

        .el-aside {
            background-color: rgb(217, 236, 255);
            width: v-bind(asideWidth);

            .logo_box {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .el-header {
            background-color: rgb(198, 226, 255);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .el-main {
            background-color: rgb(236, 245, 255);

            .el-image {
                width: 156px;
                height: 156px;
            }
        }
    }
}
</style>
